<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>字体设置</title>

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />

  <script src="../js/vue/vue.js"></script>

  <link rel="stylesheet" href="../js/elementui/index.css">
  <script src="../js/elementui/index.js"></script>
  <script src="../js/theme/FileSaver.js"></script>
  <script src="/js/theme/pptx/libs/jquery.min.js"></script>
  <script src="/js/common.js?t=20250804"></script>
  <link rel="stylesheet" href="../css/common.css">

  <link rel="stylesheet" href="/js/layer/layer.css" type="text/css">
  <script src="/js/layer/layer.js"></script>
  <style>
    .setting-editor{
      margin: 40px;
    }
    .step-box {
      line-height: 30px;
      height: 30px;
    }
  </style>
</head>

<body>
<div id="app">
  <div class="setting-editor">
    <el-form ref="form" :model="form" label-width="5px" size="small">
      <el-row v-for="type in types" :key="type.code">
        <el-form-item><div class="step-box">{{type}}</div></el-form-item>
        <el-row v-for="(item,index) in form[type]" :key="item.id">

          <el-col :span="4">
            <el-form-item >
              <el-input type="text" v-model="item.key" placeholder="key" :disabled="item.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item >
              <el-input type="text" v-model="item.value" placeholder="value" ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="2" v-show="item.value != item._value">
            <el-form-item  label-width="5px">
              <el-button type="success" icon="el-icon-check" circle size="mini" @click="saveSetting(item)"></el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item  label-width="5px">
              <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteSetting(index, item)"></el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item >
            <el-button plain icon="el-icon-plus" size="mini" @click="addSetting(type)"></el-button>
          </el-form-item>
        </el-row>
      </el-row>

      </el-row>
    </el-form>

  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      "types":["usad","usap"],
      form: {
        "usad": ['Region'],
        "usap" : ['Region']
      }
    },
    created: function () {
      let dataType = DataUtils.get("dataType");
      if (dataType){
        this.types = [dataType];
      }
      $$.list("setting",(list)=>{
        (list||[]).forEach(item =>{
          item._value = item.value;
          this.form[item.type].push(item);
        });
      })
    },
    methods: {
      addSetting(type){
        this.form[type].push({"type":type,"_value":null,"value":""});
      },
      deleteSetting(index, item){
        if(item.id){
          $$.delete("setting",item.id,(r)=>{
            layer.msg("删除成功！");
            this.form[item.type].splice(index,1);
          },(r)=>{
            layer.msg(r.msg || "删除失败!");
          })
        }
      },
      saveSetting(item ){
        let data = {"id":item.id,"key":item.key,"value":item.value,"type":item.type};
        $$.save("setting",data,(r)=>{
          item.id = r.id;
          item._value = data.value;
          layer.msg("保存成功！");
        },(r)=>{
          layer.msg(r.msg || "保存失败!");
        })
      }
    }
  })
</script>

</body>

</html>